<%--
  Created by IntelliJ IDEA.
  User: CM
  Date: 17/5/21
  Time: 下午7:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>代理商商页面管理</title>

    <link href="${ctx}/resources/pagination/style/pagination.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/resources/pagination/style/common.css" rel="stylesheet" type="text/css">
    <jsp:include page="../../common/header.jsp"></jsp:include>
    <jsp:include page="../../common/cloud-head.jsp"></jsp:include>
    <jsp:include page="../../common/dt.jsp"></jsp:include>
    <script type="text/javascript" src="${ctx}/resources/pagination/script/jquery.pagination.js"></script>
    <style>
        #areaSelectBox > div {
            display: inline-block;
            width: 166px;
        }

        #dateRange {
            display: inline-block;
            width: 15rem;
        }

        #linkInputBox {
            display: block;
        }

        .card-content {
            min-height: 83px;
        }

        #articleSelectBox, #goodSelectBox {
            display: none;
        }

        .article-item {
            display: inline-block;
            background: #f3f3f3;
            border: 1px solid #afa0a0;
            line-height: 2.5rem;
            padding: 0 0 0 1rem;
        }

        .article-item .item-title {
            font-weight: bold;
            color: #555;
        }

        .article-item i.fa {
            display: inline-block;
            line-height: 2.5rem;
            width: 2rem;
            text-align: center;
            color: #fff;
            background: #fb5e5e;
            height: 2.5rem;
            vertical-align: top;
        }

        span.good-item:hover, span.shop-item:hover, span.article-item:hover {
            border-color: #af8080;
            box-shadow: 0 0 3px #f00;
        }

        #newBox, #hotBox, #infoBox, #shopBox {
            overflow-y: auto;
        }

        .article-item {
            padding: 0;
        }

        .article-item .item-thumb {
            display: block;
            width: 12rem;
        }

        .article-item .item-thumb img {
            display: block;
            width: 100%;
        }

        .article-item .item-title {
            width: 100%;
            padding: 0;
            background: #fff;
            border: none;
            display: block;
            text-align: center;
        }

        .article-item i.fa {
            display: block;
            padding: 0;
            margin: 0;
            width: 100%;
            opacity: 0.8;
        }

        .article-item i.fa::after {
            content: '点击删除';
            display: inline-block;
            margin-left: .4rem;

        }

        .article-item {
            border: 1px solid #ddd;
            box-shadow: -1px 0 3px #888;
            cursor: pointer;
            transition: all ease .8s;
        }

        .article-item:hover {
            box-shadow: -1px 0 3px #f33;
            border-color: #f00;
        }

        .article-item i.fa:hover {
            background: #f33;
            color: #fff;

            transition: all ease .8s;
        }

        .article-item .item-title {
            padding: 0 0.8rem;
            color: #555;
        }

        .article-item i.fa {
            background: #f7f7f7;
            color: #666;
        }

        .article-item .item-thumb {
            display: block;
            width: 12rem;
            height: 4rem;
            overflow: hidden;
        }

        span.item-title {
            height: 2.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .article-item {
            position: relative;
            height: 9rem;
        }

        .article-item i.fa {
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #shopbox img {
            width: 12rem;
            height: 4rem;
        }
        .article-item img {
            width: 12rem;
            height: 4rem;
        }
    </style>
</head>
<body>
<%--slider configuration--%>
<div class="col-md-12">
    <div class="card">
        <div class="card-action">
            <label>轮播图配置</label>
            <button class="btn btn-primary" data-toggle="modal" onclick="$('#addDialog').modal('show')">添加轮播图
            </button>
        </div>
        <div class="card-content">
            <table id="mainTable" cellpadding="0" cellspacing="0" border="0" class="auto-table">
                <thead>
                <tr>
                    <th>图片</th>
                    <th>链接类型</th>
                    <th>链接</th>
                    <th>投放城市</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>
<%--article configuration--%>
<div class="col-md-12">
    <div class="card" id="flagShopBox">
        <div class="card-action">
            <label>明星企业配置</label>
            <button class="btn btn-primary" data-target="shopBox" onclick="getScopeType('AGENCY',this)">添加店铺</button>
        </div>
        <div class="card-content" id="shopBox">
        </div>
    </div>
</div>
<div class="col-md-12">
    <div class="card" id="adviceShopBox">
        <div class="card-action">
            <label>推荐商家配置</label>
            <button class="btn btn-primary" data-target="adshopBox" onclick="getScopeType('AGENCY_ADVICE',this)">添加店铺</button>
        </div>
        <div class="card-content" id="adshopBox">
        </div>
    </div>
</div>
<div class="col-md-12">
    <div class="card" id="hotsearchShopBox">
        <div class="card-action">
            <label>热门搜索商家配置</label>
            <button class="btn btn-primary" data-target="hotshopBox" onclick="getScopeType('AGENCY_HOTSERACH',this)">添加店铺</button>
        </div>
        <div class="card-content" id="hotshopBox">
        </div>
    </div>
</div>
<div class="col-md-12" title="展销会资讯配置">
    <div class="card">
        <div class="card-action">
            <label>展销会资讯配置</label>
            <button class="btn btn-primary" onclick="loadArticle();">
                <i class="fa fa-plus"></i>添加资讯
            </button>

        </div>
        <div class="card-content" id="salepartyinfo">

        </div>
    </div>
</div>
</div>
</div>
<div class="modal fade" id="addDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    添加轮播图
                </h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="form-group col-md-6">
                        <label>有效时间</label>
                        <input type="text" value="" placeholder="点击选择时间范围" name="dateRange" id="dateRange"/>
                    </div>
                    <div>
                        <div class="form-group" id="areaSelectBox">
                            <label>投放区域</label>
                            <select name="city" id="city" class="chosen-select">
                                <option value="default">默认全国</option>
                                <c:forEach items="${citys}" var="city">
                                    <option value="${city.addressId}">${city.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="clear"></div>
                        <div class="col-md-6">
                            <label>响应类型</label>
                            <select name="type" id="type" style="display: inline-block;width:10rem;"
                                    onchange="changeValueShow()">
                                <option value="LINK" selected>链接</option>
                                <option value="GOOD">商品</option>
                                <option value="ARTICLE">文章</option>
                            </select>
                        </div>
                        <div class="col-md-6" id="linkInputBox">
                            <input placeholder="请输入合法的链接" id="linkInput" type="text"/>
                        </div>
                        <div class="col-md-6" id="articleSelectBox">
                            <select id="articleSelect">

                            </select>
                        </div>
                        <div class="col-md-6" id="goodSelectBox">
                            <select id="carouselShopSelect" data-target="goodSelect" onchange="showShopGood(this)">
                                <option value="0">请选择</option>
                            </select>
                            <select id="goodSelect">
                            </select>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="clear"></div>
                <div>
                    <div class="form-group upload-img-box">
                        <label>选择图片</label>
                        <img id="preveiw1" name="preveiw1" class="img_upload_preview" for="upfile" data-target="img1"
                             src=""
                             onclick="$('#upfile').click()"
                             onerror="this.src='${ctx}/resources/ueditor/dialogs/image/images/image.png'"/>
                        <input id="upfile" type="file" name="upfile" style="display: none;"
                               onchange="uploadFile('upfile','preveiw1','uri','image')"/>
                        <input name="uri" id="uri" type="hidden">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="addCarousel()">
                    提交
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="shopSelectDialog" tabindex="-1" role="dialog" aria-labelledby="shopLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="shopLabel">
                    选择明星店铺
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>认证店铺</label>
                    <select id="shopSelect">
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="flagShop('ADD')">
                    提交
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="articleSelectDialog" tabindex="-1" role="dialog" aria-labelledby="articleLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="articleLabel">
                    选择文章
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>选择文章</label>
                    <select id="articleSelector">
                    </select>
                </div>
                <%--<div class="form-group">--%>
                <%--<label>投放区域</label>--%>
                <%--<select name="city" id="articleAreaSelector" class="chosen-select">--%>
                <%--<option value="default">默认全国</option>--%>
                <%--<c:forEach items="${citys}" var="city">--%>
                <%--<option value="${city.addressId}">${city.name}</option>--%>
                <%--</c:forEach>--%>
                <%--</select>--%>
                <%--</div>--%>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="doFlagArticle('ADD')">
                    提交
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="newGoodsSetDialog" tabindex="-1" role="dialog" aria-labelledby="shopLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="shopLabel">
                    设置行业新品链接
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>展示图片</label>
                    <img id="img-preview" name="img-preview" class="img_upload_preview"
                         for="img-file" data-target="img-val" src=""
                         onclick="$('#img-file').click()"
                         onerror="this.src='${ctx}/resources/ueditor/dialogs/image/images/image.png'"/>
                    <input id="img-file" type="file" name="img-file" style="display: none;"
                           onchange="uploadFile('img-file','img-preview','portal_img','image')"/>
                    <input name="portal_img" id="portal_img" type="hidden">
                    <div class='alert alert-warning' id="picsize"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="flagShop('ADD')">
                    提交
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="goodSelectDialog" tabindex="-1" role="dialog" aria-labelledby="hotGoodLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="hotGoodLabel">
                    选择商品
                </h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>商家</label>
                            <select id="goodMerchantSelector" onchange="showShopGood(this)" data-target="addGoodSelect">
                                <option value="0">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>商品</label>
                            <select id="addGoodSelect">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="form-group">
                    <label>投放区域</label>
                    <select name="city" id="goodAreaSelect" class="chosen-select">
                        <option value="default">默认全国</option>
                        <c:forEach items="${citys}" var="city">
                            <option value="${city.addressId}">${city.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary"
                        onclick="addGood($('#addGoodSelect').val()||'','ADD',$('#goodAreaSelect').val())">
                    提交
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="carouselTmpl">
    <tr>
        <td>
            <img data-src="\${thumb_url}" onerror="this.src='\${url}'" style="width:12rem;max-height:8rem;"/>
        </td>
        <td>
            <p><code>开始时间</code> \${formatDate(startTime)}</p>
            <p><code>结束时间</code> \${formatDate(endTime)}</p>
        </td>
        <td>
            <span>\${type_desc}</span>
            {{if type == "LINK"}}
            <a href="\${value}">\${value}</a>
            {{else}}
            <div class="target-value" data-value="\${value}" data-type="\${type}">
                <i class="fa fa-spin fa-spinner"></i>Loading
            </div>
            {{/if}}
        </td>
        <td>
            \${city_desc}
        </td>
        <td>
            <button class="btn btn-danger" onclick="delCarousel('\${cid}')">删除</button>
        </td>
    </tr>
</script>
<script type="text/html" id="starshopItemTmpl">
    {{each(index,flag) flags}}
    {{if flag.name=="AGENCY"}}
    <span class="article-item" data-id="\${_id}" data-city="\${flag.city}">
        <span class="item-title">\${companyName}</span>
        <img src="\${userLogo}"/>

        <%--<span></span>--%>
        <i class="fa fa-trash-o" title="点击删除" onclick="getdeleteType('\${_id}','\${flag.name}');"></i>
    </span>
    {{/if}}
    {{/each}}
</script>
<script type="text/html" id="adshopItemTmpl">
    {{each(index,flag) flags}}
    {{if flag.name=="AGENCY_ADVICE"}}
    <span class="article-item" data-id="\${_id}" data-city="\${flag.city}">
        <span class="item-title">\${companyName}</span>
        <img src="\${userLogo}"/>

        <%--<span></span>--%>
        <i class="fa fa-trash-o" title="点击删除" onclick="getdeleteType('\${_id}','\${flag.name}');"></i>
    </span>
    {{/if}}
    {{/each}}
</script>
<script type="text/html" id="hotshopItemTmpl">
    {{each(index,flag) flags}}
    {{if flag.name=="AGENCY_HOTSERACH"}}
    <span class="article-item" data-id="\${_id}" data-city="\${flag.city}">
        <span class="item-title">\${companyName}</span>
        <img src="\${userLogo}"/>

        <%--<span></span>--%>
        <i class="fa fa-trash-o" title="点击删除" onclick="getdeleteType('\${_id}','\${flag.name}');"></i>
    </span>
    {{/if}}
    {{/each}}
</script>
<script type="text/html" id="articleItemTmpl">
    {{each(index,flag) flags}}
    <div class="article-item" data-id="\${id}" data-city="\${flag.city}">
        <div class="item-thumb">
            <img src="\${flag.img}"/>
        </div>
        <span class="item-title">\${main_title}</span>
        <%--<span class="item-city">\${flag.city_desc}</span>--%>
        <i class="fa fa-trash-o" onclick="doFlagArticle('DELETE','\${id}','\${flag.city}','\${flag.name}')"
           title="点击删除"></i>
    </div>
    {{/each}}
</script>
<script src="${ctx}/resources/portal/script/agencySet.js" type="text/javascript"></script>
<jsp:include page="/WEB-INF/view/admin/shop/content/common-tmpl.jsp"></jsp:include>
</body>
</html>
